import React, {Component, Fragment} from 'react';
import {Link} from 'dva/router';
import {connect} from 'dva';
import {
  Row,
  Col,
  Icon,
  Card,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
} from 'antd';
import numeral from 'numeral';
import {
  ChartCard,
  yuan,
  MiniArea,
  MiniBar,
  MiniProgress,
  Field,
  Bar,
  Pie,
  TimelineChart,
} from 'components/Charts';
import {
  Chart,
  Axis,
  Tooltip as ChartTooltip,
  Geom,
  Coord,
  Legend,
  Guide,
  Shape,
  Label,
  View as ChartView
} from 'bizcharts';
const {Text} = Guide;
import {Funnel} from '../../components/Charts';
import Trend from 'components/Trend';
import NumberInfo from 'components/NumberInfo';
import {getTimeDistance} from '../../utils/utils';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import {View} from '@antv/data-set';

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;


import styles from './Analysis.less';

const tabKey= {
	sales : 1,//1销量
	order : 0, //0订单数
	payOrder : 2, //2付款订单数
};

export default class OrderChart extends Component {
  state = {
    currentTabKey: 'saleCount',
    rangePickerValue: getTimeDistance('today'),
    dateType: 0,  //0今天  1本周 2本月 3全年 4自定义时间段
  };

  componentDidMount() {
    const {dateType} = this.state;
    this.props.dispatch({
      type: 'orderChart/fetchOrderData',
      payload: {
        time_type: dateType,  //时间类型 0今天  1本周 2本月 3全年 4自定义时间段
        order_type: 0,  //统计类型 0订单数 1销售金额  2付款订单数
      }
    });
  }

  shouldComponentUpdate(nextProps,nextState){
    console.log(nextProps , this.props);
    if(nextProps.data == this.props.data){
      return false;
    }else{
      return true;
    }
  }

  handleTabChange = key => {
    this.setState({
      currentTabKey: key,
    });
    const {rangePickerValue, dateType} = this.state;

    this.props.dispatch({
      type: 'orderChart/fetchOrderData',
      payload: {
        time_type: dateType,  //时间类型 0今天  1本周 2本月 3全年 4自定义时间段
        order_type: tabKey[key],  //统计类型 0订单数 1销售金额  2付款订单数
        startTime: rangePickerValue[0].format('YYYY-MM-DD'),
        endTime: rangePickerValue[1].format('YYYY-MM-DD'),
      }
    });
  };
  handleRangePickerChange = rangePickerValue => {
    this.setState({
      rangePickerValue,
      dateType: 4,//时间类型 0今天  1本周 2本月 3全年 4自定义时间段
    });

    const {currentTabKey} = this.state.currentTabKey;
    this.props.dispatch({
      type: 'orderChart/fetchOrderData',
      payload: {
        time_type: 4,  //时间类型 0今天  1本周 2本月 3全年 4自定义时间段
        order_type: tabKey[currentTabKey],  //统计类型 0订单数 1销售金额  2付款订单数
        startTime: rangePickerValue[0].format('YYYY-MM-DD'),
        endTime: rangePickerValue[1].format('YYYY-MM-DD'),
      }
    });
  };
  selectDate = type => {
    let dateType = 0;
    switch (type) {
      case 'today' :
        dateType = 0;
        break;
      case 'week' :
        dateType = 1;
        break;
      case 'month' :
        dateType = 2;
        break;
      case 'year' :
        dateType = 3;
        break;
      default :
        break;
    }
    this.setState({
      dateType: dateType,
      rangePickerValue: getTimeDistance(type),
    });
    const {rangePickerValue, currentTabKey} = this.state;
    this.props.dispatch({
      type: 'orderChart/fetchOrderData',
      payload: {
        time_type: dateType,  //时间类型 0今天  1本周 2本月 3全年 4自定义时间段
        order_type: tabKey[currentTabKey],  //统计类型 0订单数 1销售金额  2付款订单数
        startTime: rangePickerValue[0].format('YYYY-MM-DD'),
        endTime: rangePickerValue[1].format('YYYY-MM-DD'),
      }
    });
  };

  isActive = (type)=>{
    const {rangePickerValue} = this.state;
    const value = getTimeDistance(type);
    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return;
    }
    if (
      rangePickerValue[0].isSame(value[0], 'day') &&
      rangePickerValue[1].isSame(value[1], 'day')
    ) {
      return styles.currentDate;
    }
  }

  render() {
  	console.log(this.props.data);
  	const { currentTabKey, rangePickerValue } = this.state;
    const { data, loading, type } = this.props;

    const orderList = data ? data.map(v=>{
      return {
        x : v.dateTime,
        y : Number(v.value)
      }
    }) : [];

    const salesExtra = (
      <div className={styles.salesExtraWrap}>
        <div className={styles.salesExtra}>
          <a className={this.isActive('today')} onClick={() => this.selectDate('today')}>
            今日
          </a>
          <a className={this.isActive('week')} onClick={() => this.selectDate('week')}>
            本周
          </a>
          <a className={this.isActive('month')} onClick={() => this.selectDate('month')}>
            本月
          </a>
          <a className={this.isActive('year')} onClick={() => this.selectDate('year')}>
            全年
          </a>
        </div>
        <RangePicker
          value={rangePickerValue}
          onChange={this.handleRangePickerChange}
          style={{width: 256}}
        />
      </div>
    );

    return <div className={styles.salesCard}>
            <Tabs tabBarExtraContent={salesExtra} size="large" tabBarStyle={{ marginBottom: 24 }} onTabClick={this.handleTabChange}>
              {
              	type.map(v=>{
              		if(v === 'sales'){
              			return <TabPane tab="销售金额" key="sales">
			                <Row>
			                  <Col xl={24} lg={24} md={24} sm={24} xs={24}>
			                    <div className={styles.salesBar}>
			                      <Bar height={295} title="销售金额趋势" data={orderList} />
			                    </div>
			                  </Col>
			                </Row>
			              </TabPane>	
              		}else if(v === 'order'){
              			return <TabPane tab="订单数" key="order">
			                <Row>
			                  <Col xl={24} lg={24} md={24} sm={24} xs={24}>
			                    <div className={styles.salesBar}>
			                      <Bar height={295} title="订单数趋势" data={orderList} />
			                    </div>
			                  </Col>
			                </Row>
			              </TabPane>
              		}else if(v === 'payOrder'){
              			return <TabPane tab="付款订单数" key="payOrder">
			                <Row>
			                  <Col xl={24} lg={24} md={24} sm={24} xs={24}>
			                    <div className={styles.salesBar}>
			                      <Bar height={295} title="付款订单趋势" data={orderList} />
			                    </div>
			                  </Col>
			                </Row>
			              </TabPane>
              		}
              	})
              }
            </Tabs>
          </div>
  }
}
